<template>
  <div class="app-container">
    <div class="content">
      <div class="left">
        <Tree @change="onChangeTree"></Tree>
      </div>

      <div class="right">
        <mapLocation ref="mapLocation" @mapLoaded="onMapLoaded" @handleClickMarker="handleClickItem"></mapLocation>
        <!-- 弹窗 -->
         <FlvPlayer class="flv-player-box" v-if="currentItem.code" :showClose="true" :code="currentItem.code" @close="onClose"></FlvPlayer>
      </div>
    </div>
  </div>
</template>

<script>
import monitorGroup from "./components/monitorGroup.vue";
import mapLocation from "./components/mapLocation.vue";
import { getList } from "@/api/device";

let mapStatus = {
  mapOk: false,
  markerF: false
}
export default {
  components: {
    monitorGroup,
    mapLocation,
  },
  data() {
    return {
      list: [],
      current: "",
      currentItem: {
        deviceCode: ''
      },
      group: {},
      queryParams: {
        page: 1,
        pageSize: 999,
        type: 'MONITOR'
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onChangeTree(data) {
        this.group = data;
        this.queryParams.groupPath_ = data.groupPath;
        this.clearMarkers()
        this.getList()
    },
    // 获取列表
    async getList() {
      try {
        const res = await getList(this.queryParams);
        if(res.data && res.data.length) {
          this.list = res.data;
        
          if(mapStatus.mapOk) this.setMarkers()
        }else{
            return this.$modal.msgError("未绑定监控！")
        }
      } catch (error) {
        console.log("error", error)
      }
    },
    onMapLoaded() {
      mapStatus.mapOk = true
      if(!mapStatus.markerF) this.setMarkers()
    },
    setMarkers() {
      this.$refs.mapLocation.addMarkers(this.list)
      mapStatus.markerF = true;
    },
    clearMarkers() {
      this.$refs.mapLocation && this.$refs.mapLocation.removeMarkers()
    },
    handleChange(item) {
      if(item.open && this.current.typeKey!= item.typeKey) {
        this.$set(item, 'open', true)
      }else{
        this.$set(item, 'open', !item.open)
      }
      if(this.current.typeKey === item.typeKey) return;
      this.$refs.mapLocation.removeMarkers()
      this.$refs.mapLocation.addMarkers(item.list)
      this.current = item;
      this.currentItem = {}
    },
    handleClickItem(item) {
      this.currentItem = item;
      this.$refs.mapLocation.selMarker(item)
    },
    onClose() {
        this.currentItem = {}
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background: rgba(247, 246, 251, 1);
  .content {
    display: flex;
    .left {
      width: 300px;
      height: calc(100vh - 150px);
      overflow: auto;
      flex-shrink: 0;
      margin-right: 20px;
    }
    .right {
      position: relative;
      flex: 1;
      height: calc(100vh - 150px);
      .flv-player-box {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 600px;
        height: 400px;
      }
    }
  }
}

.x-list {
  height: 99%;
  overflow-y: auto;
  padding-bottom: 20px;
  border-radius: 10px;
  background: #fff;
  .x-li-item {
    border-bottom: 2px solid #e4e4e457;
    .p-item {
      padding: 8px 0;
      cursor: default;
      font-size: 14px;
      padding-left: 10px;
      position: relative;
      &:hover {
        background: #40a0ff42;
      }
      .el-tree-node__expand-icon {
        color: #000;
        font-size: 14px;
        padding: 5px;
        transform: rotate(0deg);
        transition: transform 0.3s ease-in-out;
      }
      &.open {
        .el-tree-node__expand-icon {
          transform: rotate(90deg);
        }
      }
      &.current {
        background: #40a0ff37;
      }
    }
  }

  .child-list {
    transition: display 1s;
    display: none;
    &.show {
      transition: 1s;
      display: block;
    }
    .x-child-item {
      border-radius: 5px;
      padding: 5px 0;
      padding-left: 38px;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        background: #40a0ff93;
        color: #ffffff;
      }
      &.current {
        color: #ffffff;
        background: #40a0ffe1;
        font-weight: 700;
      }
    }
  }
}
</style>
